<template>
    <view class="h-12 w-full flex bg-white fixed top-0 z-10">
    <view class="flex-1 flex items-center justify-center">
      领取中
    </view>
    <view class="flex-1 flex items-center justify-center">
      已领取
    </view>
    <view class="flex-1 flex items-center justify-center">
      已结束
    </view>
  </view>

  <view class="px-4 mt-16 pb-20">
    <view v-for="item in 8" @click="jumpCouponDetail" class="px-4 flex bg-white items-center h-28 border border-solid border-slate-300 mt-6 rounded relative">
      <view class="felx-1">
        <view class="font-bold text-blue-500 text-3xl">500</view>
        <view class="font-bold text-blue-500 text-xl text-center">金币</view>
      </view>
      <view class="ml-3">
        <view class="text-xl">充值加成券</view>
        <view class="mt-1 mb-2 text-xs">单次充值满500元送500金币</view>
        <view class="text-xs">使用期限: 2023-03-29 12:16:06</view>
        <view class="text-xs">总量: 2张 领取2张 使用0张</view>
      </view>
      <view class="ml-auto">
        <image class="w-6 h-6" src="@/static/image/rt.png"></image>
      </view>

      <view class="text-sm absolute px-4 top-0 right-0 bg-blue-500 text-white">
        已领取
      </view>

    </view>
  </view>

  <view class="couponBtn flex items-center justify-center w-36 h-10 bg-indigo-500 rounded-3xl text-white fixed bottom-4" @click="jumpCreate">生成兑换码</view>

</template>

<script setup lang="ts">
import { onReachBottom } from "@dcloudio/uni-app"
const jumpCouponDetail = () => {
  uni.navigateTo({ url: '/pages/coupon/detail' })
}

const jumpCreate = () => {
  uni.navigateTo({ url: '/pages/exCode/create' })
}

onReachBottom(() => {
  console.log('滚动到底部')
})
</script>

<style scoped lang="scss">
page {
  background: #f5f5f5;
}

.couponBtn {
  left: 50%;
  transform: translateX(-50%);
}
</style>
